<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css正方形</title>
  </head>
  <style>
    /* 可以作来测试视口的宽高比 */
    @media (aspect-ratio: 1/1) {
      div {
        background-color: yellow;
      }
    }
    .app {
      width: 400px;
      height: 800px;
    }

    .box-1 {
      width: 100px;
      background-color: red;
      aspect-ratio: 1/1;
    }
    /* padding-top的百分比是相对于父元素的width */
    .box-2 {
      width: 100%;
      padding-top: 100%;
      background-color: aqua;
    }
  </style>
  <body>
    <div class="app">
      <div class="box-1"></div>
      <div class="box-2"></div>
    </div>
  </body>
</html>
